/**
 * @desc 发布照片
 */

import Taro from "@tarojs/taro"
import { View, Text, Button, Image, Slider } from "@tarojs/components"

import "./styles.less"

class MainFunction extends Taro.Component {
    state = {
        imgUrl: "",
        blur: 0, //模糊
        brightness: 100, // 亮度
        contrast: 100, // 对比度
        grayscale: 0, // 灰度
        filterCss: "none"
    }

    onTakePhoto() {
        Taro.chooseImage().then(res => {
            this.setState({ imgUrl: res.tempFilePaths[0] })
        })
    }

    onValueChange(key, event) {
        const value = event.detail.value
        this.setState({ [key]: value }, () => {
            const { blur, brightness, contrast, grayscale } = this.state
            const css = `blur(${blur}px) brightness(${brightness}%) contrast(${contrast}%) grayscale(${grayscale}%)`
            this.setState({ filterCss: css })
        })
    }

    render() {
        const { imgUrl, filterCss } = this.state

        return (
            <View>
                <Text>发布照片</Text>
                <Button onClick={this.onTakePhoto.bind(this)}>拍照</Button>
                <Image src={imgUrl} style={{ filter: filterCss }} />

                <View>
                    <Text>高斯模糊</Text>
                    <Slider
                        step="0.1"
                        value={0}
                        showValue
                        min="0"
                        max="10"
                        showValue
                        onChange={this.onValueChange.bind(this, "blur")}
                    />
                </View>

                <View>
                    <Text>亮度</Text>
                    <Slider
                        step="1"
                        value={100}
                        showValue
                        min="0"
                        max="100"
                        showValue
                        onChange={this.onValueChange.bind(this, "brightness")}
                    />
                </View>

                <View>
                    <Text>对比度</Text>
                    <Slider
                        step="1"
                        value={100}
                        showValue
                        min="0"
                        max="100"
                        showValue
                        onChange={this.onValueChange.bind(this, "contrast")}
                    />
                </View>

                <View>
                    <Text>灰度</Text>
                    <Slider
                        step="1"
                        value={0}
                        showValue
                        min="0"
                        max="100"
                        showValue
                        onChange={this.onValueChange.bind(this, "grayscale")}
                    />
                </View>
            </View>
        )
    }
}

export default MainFunction
